<template>
  <div id="msite">
    <head-top signinUp="msite" class="head-top">
      <router-link to="/search/geohash" slot="search">
        <icon-svg icon-class="iconsousuo"></icon-svg>
      </router-link>
      <router-link to="/home" slot="msite-title" class="msite-title ellipsis">{{
        msiteTitle
      }}</router-link>
    </head-top>
    <swiper ref="mySwiper" :options="swiperOptions" v-if="foodTypes.length">
      <swiper-slide
        v-for="(item, index) in foodTypes"
        :key="index"
        class="food-item-wrap"
      >
        <router-link
          class="food-item-link"
          v-for="foodItem in item"
          :key="foodItem.id"
          :to="{
            path: '/food',
            query: {
              geohash,
              title: foodItem.title,
              restaurant_category_id: getCategoryId(foodItem.link),
            },
          }"
        >
          <figure class="food-item-figure">
            <img :src="imgBaseUrl + foodItem.image_url" class="food-item-img" />
            <figcaption class="food-item-title">
              {{ foodItem.title }}
            </figcaption>
          </figure>
        </router-link>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="shop-list-container">
      <header class="shop-head">
        <icon-svg icon-class="iconshangcheng1"></icon-svg>
        <span class="shop-header-title">附近商家</span>
      </header>
      <shop-list v-if="hasGetData" :geohash="geohash"></shop-list>
    </div>
    <foot class="foot"></foot>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
// 解决swiper6 pagination不显示问题
import Swiper2, { Navigation, Pagination } from "swiper";
Swiper2.use([Navigation, Pagination]);
import { mapMutations } from "vuex";
import { msiteAddress, msiteFoodTypes } from "@/network/getData";
import headTop from "@/components/header/head";
import foot from "@/components/footer/foot";
import ShopList from "@/components/common/ShopList";
export default {
  name: "msite",
  data() {
    return {
      geohash: null,
      msiteTitle: "",
      hasGetData: false,
      foodTypes: [],
      imgBaseUrl: "https://fuss10.elemecdn.com", //图片域名地址

      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
        // Some Swiper option/callback...
      },
    };
  },
  computed: {
    // swiper() {
    //   return this.$refs.mySwiper.$swiper;
    // },
  },
  components: { headTop, Swiper, SwiperSlide, foot, ShopList },
  created() {
    msiteFoodTypes().then((res) => {
      let resLength = res.length;
      let resArr = [...res]; // 返回一个新的数组
      let foodArr = [];
      for (let i = 0, j = 0; i < resLength; i += 8, j++) {
        foodArr[j] = resArr.splice(0, 8);
      }
      this.foodTypes = foodArr;
    });
  },
  async beforeMount() {
    this.geohash = this.$route.query.geohash;
    this.SAVE_GEOHASH(this.geohash);
    // 获取位置信息
    let res = await msiteAddress(this.geohash);
    this.msiteTitle = res.name;
    //记录经纬度
    this.RECORD_ADDRESS(res);
    this.hasGetData = true;
  },
  mounted() {},

  methods: {
    ...mapMutations(["SAVE_GEOHASH", "RECORD_ADDRESS"]),
    getCategoryId(url) {
      let urlData = decodeURIComponent(
        url.split("=")[1].replace("&target_name", "")
      );
      if (/restaurant_category_id/gi.test(urlData)) {
        return JSON.parse(urlData).restaurant_category_id.id;
      } else {
        return "";
      }
    },
  },
};
</script>
<style scoped lang='scss'>
@import "@/style/mixin";

.iconsousuo {
  margin-left: 0.4rem;

  color: #fff;

  @include ct;
}

.msite-title {
  display: block;

  width: 50%;
  margin: 0 auto;

  color: #fff;

  font-size: 0.8rem;

  @include center;
}

.food-item-wrap {
  display: flex;
  flex-wrap: wrap;

  margin-top: 1.95rem;
  padding-bottom: 1rem;

  background-color: #fff;
}

.food-item-figure {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.food-item-link {
  width: 25%;
}

.food-item-img {
  width: 1.8rem;
  height: 1.8rem;
  margin: 0.5rem 0;
}

.food-item-title {
  font-size: 0.55rem;
}

::v-deep .swiper-pagination {
  bottom: 0.15rem;
}

.shop-list-container {
  margin-top: 0.5rem;
  padding-bottom: 1.6rem;

  background-color: #fff;
}

.shop-head {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;

  font-size: 0.55rem;

  .shop-header-title {
    margin-left: 0.5rem;
  }
}
</style>
